<template>
	<view class="app app-bg">
		<!-- 页面内容开始 -->
		<view class="vk-list-view">

			<!--头部开始 -->
			<view class="list-head">
				<view class="list-search">
					<view class="list-search-input">
						<u-search v-model="queryForm1.formData.order_no" placeholder="输入订单号搜索" :show-action="false" input-align="center" class="search-input" shape="square" @search="search" @clear="search" ></u-search>
						<!-- 高级搜索按钮图标 -->
						<u-icon class="advanced-search" name="list-dot" color="#909399" size="40" @click="show.advancedSearch = true" ></u-icon>
					</view>
					<!-- 状态筛选 -->
					<view class="subsection">
						<u-subsection
							:list="subsection1.list"
							v-model="subsection1.current"
							:button-color="subsection1.list[subsection1.current].color"
							active-color="#ffffff"
							bg-color="#ffffff"
							@change="sectionChange1"
						></u-subsection>
					</view>
				</view>
				<!-- 总记录数 -->
				<view class="list-head-desc-text"> 共 <text class="list-head-text-num">{{ data.total }}</text> 条记录 </view>
				<view class="list-head-desc-text" style="font-size: 24rpx;"> 注意：即使结算时间到了，也可能有10分钟延迟，请耐心等待。</view>
			</view>
			<!--头部结束 -->
			<!--无内容时 -->
			<view v-if="data.list.length == 0" style="padding: 40% 0 80% 0;">
				<u-empty v-if="loading" text="查询中..." mode="search"></u-empty>
				<u-empty v-else text="暂无内容" mode="list"></u-empty>
			</view>
			<!--有内容时开始-->
			<view v-if="data.list.length > 0" class="list-view">
				<view v-for="(item, index) in data.list" :key="item._id">
					<!-- ****************** 自定义item的内容开始 ****************** -->

					<view class="list-view-item">
						<view class="item-view">
							<view class="content" @click.stop="collapse(index)">
								<!-- 自定义内容开始 -->

								<view class="order-item-wrapper">
								  <view class="order-item-info">
								    <view class="order-item-name">买家：{{ $getData(item,'buyer_info.nickname')}}</view>
								    <view class="order-item-state">
								      <text v-if="item.fx.settlement_status == 2" class="gray-state">不结算</text>
								      <text v-else-if="item.fx.settlement_status == 0 && vk.pubfn.dateDiff2($getData(item, 'fx.plan_exec_time')) !== '1秒'" class="reward_state_0"><text style="color: red;margin-right: 18rpx;">{{ vk.pubfn.dateDiff2($getData(item, 'fx.plan_exec_time')) }}</text>后结算</text>
											<text v-else-if="item.fx.settlement_status == 0 && vk.pubfn.dateDiff2($getData(item, 'fx.plan_exec_time')) === '1秒'" class="reward_state_0">待结算</text>
								      <text v-else-if="item.fx.settlement_status == 1" class="reward_state_1">已结算</text>
								    </view>
								  </view>
								  <view class="order-item-date">付款时间：{{ vk.pubfn.timeFormat(item.pay_time) }}（{{ vk.pubfn.dateDiff(item.pay_time) }}）</view>
								  <view class="order-item-goods" v-if="item.goods_sku_list && item.goods_sku_list.length>0">
										<view class="goods-list-wrapper" v-for="(item2,index2) in item.goods_sku_list" :key="index2">
											<view class="goods-item-wrapper">
												<view class="goods-item-inner">
													<view class="goods-item-img">
														<image mode="aspectFill" :src="item2.image"></image>
													</view>
													<view class="goods-item-info">
														<view class="goods-item-title u-line-2">{{ item2.goods_name }}</view>
														<view class="goods-item-sku-name" v-if="item2.sku_name">规格：{{ item2.sku_name }}</view>
														<view class="goods-item-desc">
															<view class="goods-item-rate">价格：{{ vk.pubfn.priceFilter(item2.real_price) }}</view>
															<view class="goods-item-num">x{{ item2.buy_num }}</view>
														</view>
													</view>
												</view>
												<view class="goods-item-status">
													<text>{{ statusFn(item2) }}</text>
												</view>
											</view>
										</view>
								  </view>
									<view v-else class="goods-list-wrapper">
										<view class="goods-list-wrapper">
											<view class="goods-item-wrapper">
												<view class="goods-item-inner">
													<view class="goods-item-img">
														<image mode="aspectFill" v-if="$getData(item, 'app_info.app_logo')" :src="$getData(item, 'app_info.app_logo')"></image>
													</view>
													<view class="goods-item-info">
														<view class="goods-item-title">
															<text v-if="item.type == 'repayment'">货款结账</text>
															<text v-else>余额充值</text>
														</view>
														<view class="goods-item-desc">
															<view class="goods-item-rate">数量：{{item.amount_info.total_original_price}} {{ item.type == 'repayment' ? '(原价)' : '' }}</view>
														</view>
													</view>
												</view>
												<view class="goods-item-status">
													<text>{{ statusFn(item2) }}</text>
												</view>
											</view>
										</view>
									</view>
									<view class="order-item-total-money">订单实付：￥{{ vk.pubfn.priceFilter(item.amount_info.payment_amount) }}</view>
									<view class="order-item-total-money" v-if="item.amount_info.used_balance_amount && item.amount_info.used_cash_amount">使用余额：￥{{ vk.pubfn.priceFilter(item.amount_info.used_balance_amount) }}</view>
									<view class="order-item-total-money" v-if="item.amount_info.used_balance_amount && item.amount_info.used_cash_amount">使用现金：￥{{ vk.pubfn.priceFilter(item.amount_info.used_cash_amount) }}</view>
									<view class="order-item-total-money"><text>订单号：{{ item.order_no }}</text><text class="copy-text" @click="copy(item.order_no)">复制</text></view>
									<!-- <view class="order-item-total-money" style="color: red;">预计奖励：￥{{ calcReward(item) }}</view> -->
									<view class="order-item-cps-money" v-if="[-5,-4].indexOf(item.status) > -1">
										<view class="order-item-cps-money-inner">已退款</view>
									</view>
								  <view class="order-item-footer van-hairline--top"></view>
								</view>

								<!-- 自定义内容结束 -->
							</view>
						</view>
						<view class="collapse" :class="footer.actived === index ? 'actived' : 'actived'">
							<block v-for="(btn, btnIndex) in footer.list" :key="btnIndex">
								<view v-if="footerShowFn(btn, item, index)" @click="footerBtn(item, btn, index)" :class="btn.main ? 'main':''">
									{{ btn.text }}
								</view>
							</block>
						</view>
					</view>

					<!-- ****************** 自定义item的内容结束 ****************** -->
				</view>
				<!-- 加载更多-->
				<u-loadmore :status="state.loadmore" bg-color="#f8f8fa" margin-bottom="30" @loadmore="nextPage" />
			</view>
			<!--有内容时结束-->
		</view>
		<!-- 高级搜索弹窗开始 -->
		<u-popup v-model="show.advancedSearch" mode="right" width="600">
			<view class="search-popup">
				<scroll-view scroll-y="true" class="scroll-view">
					<view>
						<!-- ****************** 自定义高级搜索表单开始 ****************** -->
						<u-form
							:model="queryForm1.formData"
							ref="queryForm1"
							label-position="top"
							:label-style="{ fontWeight: '500' }"
						>
							<u-form-item label="付款时间" prop="_add_time">
								<view class="date-range" @click="show.add_time = true">
									{{
										queryForm1.formData._add_time[0]
											? vk.pubfn.timeFormat(queryForm1.formData._add_time[0], "yyyy/MM/dd") +
											  " - " +
											  vk.pubfn.timeFormat(queryForm1.formData._add_time[1], "yyyy/MM/dd")
											: "日期范围"
									}}
								</view>
							</u-form-item>
							<u-form-item label="昵称" prop="nickname">
								<u-input v-model="queryForm1.formData.nickname" />
							</u-form-item>
							<!-- <u-form-item label="手机号" prop="mobile">
								<u-input v-model="queryForm1.formData.mobile" />
							</u-form-item> -->
						</u-form>
						<!-- 日历范围选择组件 -->
						<u-calendar
							v-model="show.add_time"
							mode="range"
							safe-area-inset-bottom
							btn-type="default"
							active-bg-color="var(--main,#2979ff)"
							range-bg-color="var(--secondary,rgba(41,121,255,0.13))"
							@change="calendarChange"
						></u-calendar>
						<!-- ****************** 自定义高级搜索表单结束 ****************** -->
					</view>
				</scroll-view>
				<view class="confrim-btn">
					<view class="btn reset" @click="advancedSearchReset">重 置</view>
					<view class="btn confirm" @click="advancedSearchConfirm">确 定</view>
				</view>
			</view>
		</u-popup>
		<!-- 高级搜索弹窗结束 -->

		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
	</view>
</template>

<script>
var vk = uni.vk; // vk依赖
var originalForms = {}; // 表单初始化数据
export default {
	data() {
		// 页面数据变量
		return {
			// 获取list数据的云函数请求路径
			url: "client/salesman.getUserOrder",
			// init请求返回的数据
			data: {
				list: [],
				total: 0,
				hasMore: true // 是否还有下一页数据
			},
			// 表单请求数据
			queryForm1: {
				// 分页数据
				pagination: {
					pageIndex: 1, //当前页码
					pageSize: 50 //每页显示数量
				},
				// 表单数据源
				formData: {
					_add_time: [],
					order_no: "",
					real_name: "",
					index: ""
				},
				columns: [
					{ key: "_add_time", title: "下单时间", type: "datetimerange", width: 320, mode: "[]", fieldName:"pay_time" },
					{ key: "order_no", title: "订单号", type: "text", width: 200, mode: "%%" },
					{ key: "nickname", title: "下单人昵称", type: "text", width: 200, mode: "%%", fieldName:"buyer_info.nickname" },
					{ key: "settlement_status", title: "结算状态", type: "text", width: 150, mode: "=", fieldName:"fx.settlement_status" }
				],
				sortRule: []
			},
			// 页面状态
			state: {
				loadmore: "loading", // loadmore的显示状态
				firstLoading: false, // 是否首次加载中
				isEmpty: false // 第一页是否无数据
			},
			loading: false, // 是否请求中
			scrollTop: 0, // 滚动条当前位置
			// 头部状态选择
			subsection1: {
				key: "settlement_status", // 查询字段名
				current: 0, // 当前选中的索引
				list: [
					{ name: "全部", value: "", color: "var(--main)" },
					{ name: "待结算", value: 0, color: "var(--main)" },
					{ name: "已结算", value: 1, color: "var(--main)" },
				]
			},
			// 每一项底部的拓展按钮
			footer: {
				actived: "",
				color: "#909399",
				list: [
					{
						text: "查看奖励",
						click(item) {
							vk.navigateTo(`./salesman-account-record?no=${item.order_no}`);
						},
						// 显示规则
						showRule:(item, index) => {
							return item.fx.settlement_status == 1;
						},
					}
				]
			},
			// 页面上所有弹窗的开关
			show: {
				add_time: false, // 高级搜索弹窗中的日历选择弹窗开关
				advancedSearch: false, // 高级搜索弹窗开关
			},
			appInfo:{}
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		vk = uni.vk;
		this.options = options;
		this.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {

	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 页面下拉刷新
	onPullDownRefresh() {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	// 监听 - 页面触底部
	onReachBottom(options) {
		this.nextPage();
	},
	// 监听 - 点击右上角转发时
	onShareAppMessage(options) {

	},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
			let that = this;
			console.log("init: ", options);
			// 拷贝一份表单的初始值
			originalForms["queryForm1"] = vk.pubfn.copyObject(that.queryForm1.formData);

			// 根据url参数settlement_status，设置当前选中的状态
			if (options.settlement_status) {
				let index = vk.pubfn.getListIndex(that.subsection1.list, "value", Number(options.settlement_status));
				if (index > -1) that.subsection1.current = index || 0;
				that.sectionChange1(that.subsection1.current, false);
				that.queryForm1.formData.settlement_status = Number(options.settlement_status);
			}

			if (options.time) {
				let { todayStart, todayEnd } = vk.pubfn.getCommonTime();
				that.queryForm1.formData._add_time = [todayStart,todayEnd];
			}
			if (vk.pubfn.isNotNullAll(options.startTime, options.endTime)) {
				that.queryForm1.formData._add_time = [Number(options.startTime), Number(options.endTime)];
			}
			if (options.regional_agent_id) {
				that.queryForm1.formData.regional_agent_id = options.regional_agent_id;
			}
			that.search();
		},
		// 搜索
		search(e) {
			let that = this;
			that.queryForm1.pagination.pageIndex = 1;
			that.data.pageKey = true;
			that.getList();
		},
		// 加载下一页数据
		nextPage() {
			let that = this;
			if (that.state.loadmore == "loadmore") {
				that.state.loadmore = "loading";
				that.queryForm1.pagination.pageIndex++;
				that.getList();
			}
		},
		// 查询list数据
		getList(obj = {}) {
			let that = this;
			vk.pubfn.getListData2({
				that: that,
				url: that.url,
				success: obj.success
			});
		},
		// 列的点击事件
		itemBtn(item) {

		},
		// 顶部选项改变事件
		sectionChange1(index, search=true) {
			let that = this;
			if (index < 0) {
				return false;
			}
			that.subsection1.current = index;
			let key = that.subsection1.key;
			let value = that.subsection1.list[index].value;
			that.$set(that.queryForm1.formData, key, value);
			that.data.list = [];
			that.data.total = "-";
			// 搜索
			if (search) that.search();
		},
		// 高级搜索 - 确定按钮
		advancedSearchConfirm() {
			let that = this;
			that.search();
			that.show.advancedSearch = false;
		},
		// 高级搜索 - 重置按钮
		advancedSearchReset() {
			let that = this;
			that.queryForm1.formData = vk.pubfn.copyObject(originalForms["queryForm1"]);
			that.search();
		},
		// 折叠开关
		collapse(index) {
			let that = this;
			//that.footer.actived = that.footer.actived !== index ? index : "";
		},
		// 底部按钮显示判断
		footerShowFn(btn, item, index) {
			let that = this;
			if (typeof btn.showRule == "function") {
				return btn.showRule(item, index);
			} else {
				return true;
			}
		},
		// 折叠打开后的底部按钮点击事件
		footerBtn(item, btn, index) {
			if (typeof btn.click === "function") {
				btn.click(item, btn, index);
			}
		},
		// 监听 - 日历组件的change事件
		calendarChange(e) {
			let that = this;
			that.$set(that.queryForm1.formData, "_add_time", [
				vk.pubfn.toTimeLong(e.startDate + " 00:00:00"),
				vk.pubfn.toTimeLong(e.endDate + " 23:59:59")
			]);
		},
		nameFn(item){
			let that = this;
			let { real_name, nickname} = item;
			let str = nickname
			if(real_name && real_name !== nickname){
				str += `（${real_name}）`;
			}
			return str;
		},
		calcReward(item){
			let money = 1;
			return money.toFixed(2);
		},
		statusFn(item){
			let arr = vk.getVuex('$app.config.maill.order.status');
			return arr[item.status];
		},
		copy(text){
			uni.setClipboardData({
				data: text,
				success: () => {
					vk.toast('复制成功');
				}
			});
		},
	},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
.app-bg{
	background-color: #f8f8f8;
}
/* list 开始 */
.vk-list-view {
	background-color: #f8f8fa;

	.list-view {
		padding: 0rpx 0rpx 20rpx 0rpx;
	}

	.list-search {
		background-color: #ffffff;
		padding: 20rpx 30rpx;

		.subsection {
			margin-top: 20rpx;
		}

		.list-search-input {
			display: flex;

			.search-input {
				flex: 1;
			}

			.advanced-search {
				margin-left: 20rpx;
			}
		}
	}

	.list-head-desc-text {
		font-size: 28rpx;
		color: #999;
		padding: 20rpx 30rpx 0rpx 30rpx;
		padding-bottom: 0;
		line-height: 52rpx;
		width: 100%;
	}

	.list-head-text-num {
		font-weight: bold;
		color: black;
		font-size: 26rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
}

/* list 结束 */
/* 高级搜索弹窗 */
.search-popup {
	background-color: #f3f3f3;
	height: 100vh;

	.scroll-view {
		flex: 1;
		height: calc(100vh - 76rpx);
		padding: 0;
	}

	.confrim-btn {
		display: flex;

		.btn {
			flex: 1;
			display: block;
			text-align: center;
			line-height: 80rpx;
		}

		.reset {
			color: #404040;
			background-color: #ffffff;
		}

		.confirm {
			background-color: var(--main,#4d8feb);
			color: #ffffff;
		}

		.btn:active {
			opacity: 0.7;
		}
	}

	::v-deep .u-form-item {
		background-color: #ffffff;
		display: block;
		padding: 20rpx;
		color: #7e7e7e;
		padding-top: 6rpx;
		color: #262626;
		margin-bottom: 20rpx;
	}

	.date-range {
		text-align: center;
		background-color: #f6f6f6;
		line-height: 60rpx;
		border-radius: 30rpx;
		color: #7f7f7f;
		width: 100%;
	}
}

/* list每项样式 */
.list-view-item {
	margin: 20rpx;

	.item-view {
		display: flex;
		background-color: #ffffff;
		padding: 20rpx;
		color: #606266;

		.image {
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
		}

		.content {
			flex: 1;
			font-size: 24rpx;
			position: relative;

			.text-one {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}

			.setting {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
			}
		}
	}

	.collapse {
		display: none;
		padding: 20rpx;
		font-size: 24rpx;
		color: #909399;
		line-height: 40rpx;
		background-color: #ffffff;
		border-top: 1px solid #f8f8fa;

		grid-template-columns: repeat(4, 1fr);
		gap: 16rpx;
		box-sizing: border-box;
		direction: rtl; //反向填充

		>view {
			border: 2rpx solid #909399;
			border-radius: 20rpx;
			text-align: center;
			padding: 2rpx 10rpx;
			color: #909399;
		}
		>view.main {
			border: 2rpx solid var(--main);
			color: var(--main);
		}
	}

	.collapse.actived {
		display: grid;
	}



}


.order-item-wrapper:first-child {
  margin-top: 0;
}
.order-item-wrapper {
  background-color: #fff;
  margin-top: 24rpx;
  border-radius: 8rpx;
}
.promotion-order .list-wrapper {
  margin-top: 24rpx;
}
.order-item-wrapper .order-item-info {
  display: flex;
  justify-content: space-between;
  height: 36rpx;
  align-items: center;
  font-size: 28rpx;
}
.order-item-wrapper .order-item-info .order-item-name{
  color: #323233;
}
.order-item-wrapper .order-item-info .gray-state {
  color: #c8c9cc;
}
.order-item-wrapper .order-item-date {
  font-size: 24rpx;
  line-height: 32rpx;
  color: #969799;
  margin: 16rpx 0;
}
.order-item-wrapper .order-item-cps-money, .order-item-wrapper .order-item-total-money {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 40rpx;
  font-size: 24rpx;
}
.order-item-wrapper .order-item-cps-money, .order-item-wrapper .copy-text{
	text-decoration: underline;
	color: var(--main);
	margin-left: 10rpx;
}
.order-item-cps-money-inner{
	color: #f93d28;
}
.order-item-wrapper .order-item-total-money {
  color: #969799;
}
.goods-item-wrapper .goods-item-inner{
  min-height: 128rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 16rpx 0;
  display: flex;
}
.goods-item-wrapper .goods-item-inner .goods-item-img{
  width: 160rpx;
  height: 160rpx;
  flex: 0 0 160rpx;
  border-radius: 4rpx;
  overflow: hidden;
}
.goods-item-wrapper .goods-item-inner .goods-item-img image {
  width: 100%;
  height: 100%;
}
.goods-item-wrapper .goods-item-inner .goods-item-info{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  margin-left: 16rpx;
}
.goods-item-wrapper .goods-item-inner .goods-item-info .goods-item-title {
  width: 100%;
  font-size: 28rpx;
  min-height: 40rpx;
  line-height: 40rpx;
  color: #323233;
}
.goods-item-wrapper .goods-item-inner .goods-item-info .goods-item-sku-name{
	font-size: 24rpx;
	color: #969799;
}
.goods-item-wrapper .goods-item-inner .goods-item-info .goods-item-desc {
  display: flex;
  justify-content: space-between;
	margin-top: 6rpx;
}
.goods-item-wrapper .goods-item-inner .goods-item-info .goods-item-desc .goods-item-num,
.goods-item-wrapper .goods-item-inner .goods-item-info .goods-item-desc .goods-item-rate {
  font-size: 24rpx;
  height: 32rpx;
  line-height: 32rpx;
  color: #969799;
}
.goods-item-wrapper .goods-item-status {
  font-size: 24rpx;
  text-align: right;
  color: #ff720d;
}
.desc-text {
  font-size: 28rpx;
  color: #999;
  padding: 20rpx 32rpx;
  padding-bottom: 0;
  line-height: 52rpx;
  width: 100%;
}
.text-num-1{
  font-weight: bold;
  color: black;
  font-size: 26rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
}
.reward_state_1{
  color: #ff720d;
}



</style>
